<!--主页-->
<style scoped>
.touxiang-div {
  margin: 2px;
  width: 20%;
  display: inline-block;
}

.tupian {
  width: 100%;
}

.image-div {
  width: 77%;
  float: right;
  display: inline-block;
}

.vux-flexbox-item {
  margin: 0 !important;
}

.flex-demo {
  margin: 3px;
  border: 1px solid #CCCCCC;
  background-color: #fff;
}

.content {
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  /*禁止换行*/
  text-overflow: ellipsis;
  /*文本超出隐藏*/
  -o-text-overflow: ellipsis;
  /*跟上面一样，只是为了兼容其他浏览器*/
  overflow: hidden;
  /*隐藏，跟text-overflow配合使用*/
}

._v-container {
  position: relative !important;
}

.contain {
  height: 100%;
}

</style>
<template>
  <div class="contain">
    <scroller :on-refresh="refresh" :on-infinite="loadMore" ref="myscroller">
      <flexbox v-for="item in data" key="item">
        <flexbox-item v-for="item2 in item" key="item2">
          <div class="flex-demo">
            <div class="touxiang-div ">
              <img class="tupian" :src='item2.picture'></img>
            </div>
            <div class="image-div" @click="routerDetail(item2.id, item2.userId)">
              <img class="tupian" :src='item2.imageOne'></img>
            </div>
            <div class="content">
              {{item2.content}}
            </div>
          </div>
        </flexbox-item>
      </flexbox>
    </scroller>
  </div>
</template>
<script>
import { Divider, Flexbox, FlexboxItem } from 'vux'

export default {
  components: {
    Divider,
    Flexbox,
    FlexboxItem,
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      tip: '加载中',
      data: [],
      pageNo: 1
    }
  },
  mounted() {
    //      this.loadMore()
  },
  methods: {
    refresh() {
      setTimeout(() => {
        this.pageNo = 1;
        this.data = [];
        this.load();
        this.$refs.myscroller.finishPullToRefresh()
      }, 1000)
    },
    loadMore() {
      //为了出现加载动作
      setTimeout(() => {
        this.load()
      }, 1000)
    },
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/home/queryData.json",
        params: {
          userId: this.userId,
          pageNo: this.pageNo
        },
        successFc: (response) => {
          if (response.data.data == null) {
            _that.$refs.myscroller.finishInfinite(0);
            return;
          }
          if (response.data.data) {
            response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
              _that.data.push(o)
            })
          }
          _that.$refs.myscroller.finishInfinite(1);
        }
      });
      this.pageNo++
    },
    routerDetail(thoughtId, detailUserId) {
      this.$router.push({
        path: '/tourl/tdetail',
        query: {
          thoughtId: thoughtId,
          detailUserId: detailUserId
        }
      })
    }
  }
}

</script>
